<template>
	<view class="balance-details-page">
		<!-- 自定义头部 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="back-btn">
						<text class="cuIcon-back"></text>
					</view>
					<view class="page-title">
						佣金明细
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 加载状态 -->
			<view v-if="loading && balanceInfo.length === 0" class="loading-container">
				<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
			</view>

			<!-- 空状态 -->
			<view v-else-if="!loading && balanceInfo.length === 0" class="empty-container">
				<view class="empty-icon">
					<text class="cuIcon-form"></text>
				</view>
				<view class="empty-text">暂无明细记录</view>
				<view class="empty-desc">您的佣金明细将在这里显示</view>
			</view>

			<!-- 明细列表 -->
			<view v-else class="details-list">
				<view class="detail-item" v-for="(item, index) in balanceInfo" :key="index">
					<view class="detail-header">
						<view class="detail-type">
							<view class="type-icon" :class="item.type === 'income' ? 'icon-income' : item.type === 'expense' ? 'icon-expense' : item.type === 'withdraw' ? 'icon-withdraw' : item.type === 'refund' ? 'icon-refund' : item.type === 'commission' ? 'icon-commission' : 'icon-default'">
								<text :class="item.type === 'income' ? 'cuIcon-moneybag' : item.type === 'expense' ? 'cuIcon-pay' : item.type === 'withdraw' ? 'cuIcon-refund' : item.type === 'refund' ? 'cuIcon-refund' : item.type === 'commission' ? 'cuIcon-form' : 'cuIcon-form'"></text>
							</view>
							<text class="type-text">{{setTypeText(STATUSTYPE, item.type)}}</text>
						</view>
						<view class="detail-amount" :class="item.type === 'income' || item.type === 'refund' ? 'amount-positive' : 'amount-negative'">
							{{item.type === 'income' || item.type === 'refund' ? '+' : ''}}{{formatAmount(item.amount)}}
						</view>
					</view>
					<view class="detail-content">
						<view class="detail-desc">{{item.description || '暂无描述'}}</view>
						<view class="detail-time">{{formatDate(item.createdAt)}}</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="balanceInfo.length > 0" class="load-more-container">
				<uni-load-more 
					:status="loadMoreStatus" 
					:content-text="loadingText"
					@clickLoadMore="loadMore">
				</uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import {
		balanceBill
	} from "@/api/mine.js"
	
	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				loading: false,
				balanceInfo: [],
				type: "",
				TabCur: 0,
				scrollLeft: 0,
				STATUSTYPE: {
					income: '收入',
					expense: '支出',
					withdraw: '提现',
					refund: '退款',
					commission: '抽成',
				},
				pages: {
					page: 1,
					limit: 10,
				},
				total: 0,
				noMoreData: false,
				loadMoreStatus: 'more',
				loadingText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad() {
			this.init()
		},
		onPullDownRefresh() {
			this.refresh()
		},
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			async init() {
				if (this.balanceInfo.length >= this.total && this.balanceInfo.length > 0) {
					return
				}
				
				try {
					this.loading = true
					const res = await balanceBill(this.pages)
					const newMessages = res.data.data.list || []
					this.total = res.data.data.pagination.total || 0
					
					if (this.balanceInfo.length > 0) {
						this.balanceInfo = [...this.balanceInfo, ...newMessages]
					} else {
						this.balanceInfo = newMessages
					}
					
					this.updateLoadMoreStatus()
				} catch (error) {
					console.error('获取佣金明细失败:', error)
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				} finally {
					this.loading = false
					uni.stopPullDownRefresh()
				}
			},
			
			async refresh() {
				this.balanceInfo = []
				this.pages = {
					page: 1,
					limit: 10
				}
				this.noMoreData = false
				await this.init()
			},
			
			async loadMore() {
				if (this.noMoreData || this.loading) return
				
				this.pages.page++
				await this.init()
			},
			
			updateLoadMoreStatus() {
				if (this.balanceInfo.length >= this.total && this.total > 0) {
					this.loadMoreStatus = 'noMore'
					this.noMoreData = true
				} else if (this.balanceInfo.length === 0) {
					this.loadMoreStatus = 'more'
				} else {
					this.loadMoreStatus = 'more'
				}
			},
			
			closePage() {
				uni.navigateBack()
			},
			
			setTypeText(statusObj, type) {
				return statusObj[type] || '未知类型'
			},
			

			

			
			formatAmount(amount) {
				if (!amount && amount !== 0) return '0.00'
				return Number(amount).toFixed(2)
			},
			
			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const now = new Date()
				const diff = Math.floor((now - date) / 1000) // 秒差

				// 1分钟内
				if (diff < 60) return '刚刚'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`

				// 今天内
				if (date.toDateString() === now.toDateString()) {
					return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 今年内
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}月${date.getDate()}日`
				}

				// 其他
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.balance-details-page {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;
		
		.back-btn {
			margin-right: 20rpx;
			padding: 8rpx;
			
			.cuIcon-back {
				font-size: 36rpx;
				color: #2C2622;
			}
		}
		
		.page-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #2C2622;
		}
	}

	.content-container {
		padding: 32rpx;
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}

	.empty-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 400rpx;
		
		.empty-icon {
			margin-bottom: 32rpx;
			
			.cuIcon-form {
				font-size: 120rpx;
				color: #c0c4cc;
			}
		}
		
		.empty-text {
			font-size: 32rpx;
			color: #606266;
			margin-bottom: 16rpx;
		}
		
		.empty-desc {
			font-size: 28rpx;
			color: #909399;
		}
	}

	.details-list {
		.detail-item {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 32rpx 24rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.detail-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				
				.detail-type {
					display: flex;
					align-items: center;
					
					.type-icon {
						width: 48rpx;
						height: 48rpx;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 16rpx;
						
						text {
							font-size: 24rpx;
							color: #FFFFFF;
						}
						
						&.icon-income {
							background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
						}
						
						&.icon-expense {
							background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
						}
						
						&.icon-withdraw {
							background: linear-gradient(135deg, #E6A23C 0%, #EEBE77 100%);
						}
						
						&.icon-refund {
							background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
						}
						
						&.icon-commission {
							background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
						}
						
						&.icon-default {
							background: linear-gradient(135deg, #909399 0%, #C0C4CC 100%);
						}
					}
					
					.type-text {
						font-size: 32rpx;
						color: #2C2622;
						font-weight: 600;
					}
				}
				
				.detail-amount {
					font-size: 36rpx;
					font-weight: 700;
					
					&.amount-positive {
						color: #67C23A;
					}
					
					&.amount-negative {
						color: #F56C6C;
					}
				}
			}
			
			.detail-content {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				
				.detail-desc {
					flex: 1;
					font-size: 28rpx;
					color: #606266;
					line-height: 1.5;
				}
				
				.detail-time {
					font-size: 24rpx;
					color: #909399;
					margin-left: 24rpx;
				}
			}
		}
	}

	.load-more-container {
		margin-top: 32rpx;
		text-align: center;
	}
</style>